<!doctype html>
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta name="layout" content="common">
<title>Dashboard</title>
<script src="${resource(dir:'js', file:'highcharts.js') }"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css"
	href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css"
	href="${resource(dir:'css', file:'demo_table.css') }">
<!-- DataTables -->
<script type="text/javascript" charset="utf8"
	src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.8.2/jquery.dataTables.min.js"></script>
<script>
	$(document).ready(function() {
		$('#example').dataTable();
	});
	$(function () {
	    var chart;
	    $(document).ready(function() {
	        chart = new Highcharts.Chart({
	            chart: {
	                renderTo: 'chart_div',
	                type: 'line'
	            },
	            title: {
	                text: ''
	            },
	            subtitle: {
	                text: ''
	            },
	            xAxis: {
	                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
	            },
	            yAxis: {
	                title: {
	                    text: 'Amount ($)'
	                }
	            },
	            tooltip: {
	                enabled: false,
	                formatter: function() {
	                    return '<b>'+ this.series.name +'</b><br/>'+
	                        this.x +': '+ this.y +'°C';
	                }
	            },
	            plotOptions: {
	                line: {
	                    dataLabels: {
	                        enabled: true
	                    },
	                    enableMouseTracking: false
	                }
	            },
	            series: [{
	                name: 'Manhattan',
	                data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
	            }, {
	                name: 'CitiBank Platinum',
	                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
	            }]
	        });
	    });
	    
	});
</script>
</head>
<body>
	<h2>Dashboard</h2>
	<hr />

	<div class="row>">
		<div class="span4">
			<h3>Summary</h3>
			<br />
			<table class="table table-striped table-bordered" style="width: 80%;" id="summary">
				<tr>
					<td><b style="color: orangered;">Total Expense</b></td>
					<td><b style="color: orangered;">Budget</b></td>
				</tr>
				<tr>
					<td><b>Today:</b> $25</td>
					<td><b>This Week:</b>: $70/$100</td>
				</tr>
				<tr>
					<td><b>Past 7 days:</b> $70</td>
					<td><b>This Month:</b> $169/$500</td>
				</tr>
				<tr>
					<td><b>This Month:</b> $169</td>
					<td></td>
				</tr>
				<tr>
					<td><b>Year To Date:</b> $865</td>
					<td></td>
				</tr>

			</table>
			<br />
		</div>
		<div class="span4">
			<h3>Spending Detail for June</h3>
			<br />
			<table class="table table-striped table-bordered" style="width: 80%;" id="summary">
				<tr>
					<td><b style="color: orangered;">Total Expense</b></td>
					<td><b style="color: orangered;">Budget</b></td>
				</tr>
				<tr>
					<td><b>Today:</b> $25</td>
					<td><b>This Week:</b>: $70/$100</td>
				</tr>
				<tr>
					<td><b>Past 7 days:</b> $70</td>
					<td><b>This Month:</b> $169/$500</td>
				</tr>
				<tr>
					<td><b>This Month:</b> $169</td>
					<td></td>
				</tr>
				<tr>
					<td><b>Year To Date:</b> $865</td>
					<td></td>
				</tr>

			</table>
		</div>
	</div>
	<br />
	<br />

	<div class="row">
		<p></p><br/><p></p><br/><p></p><br/>
		<h3>Spending Chart</h3>
		<div style="width: 80%;">
		<div id="chart_div" style="height: 300px;"></div></div>
	</div>

	<div class="row">
	<br/>
		<div class="span8">
			<h3>Recent Transactions</h3>
		</div>
			<table cellpadding="0" cellspacing="0" border="0" class="display" style="width: 70%;"
				id="example">
				<thead>
					<tr>
						<th>Date</th>
						<th>Merchant</th>
						<th>Amount</th>
						<th>Card</th>
					</tr>
				</thead>
				<tbody>
					<tr class="gradeA">
						<td>15th Aug</td>
						<td>Challenger</td>
						<td>$300</td>
						<td class="center">****4231</td>
					</tr>
					<tr class="gradeC">
						<td>15th Aug</td>
						<td>Challenger</td>
						<td>$300</td>
						<td class="center">****4231</td>
					</tr>
					<tr class="gradeA">
						<td>14th Aug</td>
						<td>Fairprice</td>
						<td>$213</td>
						<td class="center">****4231</td>
					</tr>
					<tr class="gradeC">
						<td>14th Aug</td>
						<td>Sony Inc</td>
						<td>$200</td>
						<td class="center">****4231</td>
					</tr>
					<tr class="gradeA">
						<td>13th Aug</td>
						<td>Cathay Pacific</td>
						<td>$20</td>
						<td class="center">****2345</td>
					</tr>
					<tr class="gradeC">
						<td>13th Aug</td>
						<td>Starbucks</td>
						<td>$10</td>
						<td class="center">****2345</td>
					</tr>
					<tr class="gradeA">
						<td>12th Aug</td>
						<td>Dell Computer</td>
						<td>$3000</td>
						<td class="center">****4231</td>
					</tr>
					<tr class="gradeC">
						<td>12th Aug</td>
						<td>Sakae Sushi</td>
						<td>$60</td>
						<td class="center">****2345</td>
					</tr>
					<tr class="gradeA">
						<td>12th Aug</td>
						<td>UNIQLO</td>
						<td>$80</td>
						<td class="center">****2345</td>
					</tr>
					<tr class="gradeC">
						<td>11th Aug</td>
						<td>Toast Box</td>
						<td>$10</td>
						<td class="center">****4231</td>
					</tr>
					<tr class="gradeA">
						<td>10th Aug</td>
						<td>Food Junction</td>
						<td>$24</td>
						<td class="center">****2345</td>
					</tr>
					<tr class="gradeC">
						<td>10th Aug</td>
						<td>BHG</td>
						<td>$120</td>
						<td class="center">****4231</td>
					</tr>
				</tbody>
				<tfoot>
					<tr>
						<th>Date</th>
						<th>Merchant</th>
						<th>Amount</th>
						<th>Card</th>
					</tr>
				</tfoot>
			</table>
	</div>
	
<!-- Templates -->
<script type="text/template" id="summary-tpl">
<tr>
	<td><b style="color: orangered;">Total Expense</b></td>
	<td><b style="color: orangered;">Budget</b></td>
</tr>
<tr>
	<td><b>Today:</b> $ {{todayspend}}</td>
	<td><b>This Week:</b>: $70/$100</td>
</tr>
<tr>
	<td><b>Past 7 days:</b> $ {{sevendayspend}}</td>
	<td><b>This Month:</b> $169/$500</td>
</tr>
<tr>
	<td><b>This Month:</b> $ {{monthspend}}</td>
	<td></td>
</tr>
<tr>
	<td><b>Year To Date:</b> $ {{yearspend}}</td>
	<td></td>
</tr>

</script>

<!-- App -->
<script src="${resource(dir:'js/app', file:'expense_mod.js') }"></script>
</body>
</html>